<template>
  <div>
    <!--轮播图-->
    <swiper indicator-dots="true" autoplay="true" indicator-active-color="#D4091D">
      <block v-for="(item,index) in images" :key="index">
        <swiper-item>
          <image class="swiperimage" :src="item.thumb" model="aspectFit"/>
          <!--<span>{{index}}</span>-->
        </swiper-item>
      </block>
    </swiper>
    <!--轮播图下方四个页面入口-->
    <div class="page-entry">
      <div class="entry-list">
        <navigator :url="item.url" v-for="(item,index) in IndexInfo.nav" :key="index" class="item">
          <image class="item-img" model="scaleToFill" :src="item.thumb" />
          <div class="entry-name">{{item.name}}</div>
        </navigator>
      </div>
    </div>

    <!--热销产品分割线-->
    <div class="split-line">
      <span>热销产品</span>
    </div>

    <!--热销产品-->
    <div class="product-component">
      <!--广告-->
      <div>
        <navigator :url="item.url" v-for="(item,index) in IndexInfo.recommend" :key="index" class="item">
        <image mode="aspectFit" @click="go" class="product-ad-img" :src="item.thumb" />
        </navigator>
      </div>
      <div class="product-list">
        <div class="product-item" v-for="(item,index) in jobList" :key="index">
          <navigator :url="'/pages/productinfo/main?id='+item.id" class="product-content">
            <image model="aspectFit" class="product-img" :src="item.thumb" />
            <div class="product-name">{{item.title}}</div>
          </navigator>
        </div>
      </div>
    </div>

    <div class="space"> </div>
    <div class="info-item" @click="phone">
      <div class="item-left">
        <image class="img" src="/static/images/phone-active.png" />
        <div class="content">咨询热线: {{base.zixundianhua}}</div>
      </div>
      <div class="item-right" >
        一键拨号
      </div>
    </div>
    <div class="space" > </div>
    <div class="info-item" @click="map">
      <div class="item-left">
        <image class="img" src="/static/images/map.png" />
        <div class="content">地址：{{base.dizhi}}</div>
      </div>
      <div class="item-right">
        一键导航
      </div>
    </div>
    <div class="space"> </div>
    <div class="info-item">
      <div class="item-left">
        <image class="img" src="/static/images/company.png" />
        <div class="content">公司名称：{{base.gsmc}} </div>
      </div>

    </div>
    <div class="space"> </div>
    <div class="info-item">
      <div class="item-left">
        <image class="img" src="/static/images/people.png" />
        <div class="content">联系人：{{base.lianxiren}} </div>
      </div>

    </div>
    <div class="space"> </div>


    <Contact :isTab="true"> </Contact>
    <UserTabBar> </UserTabBar>

  </div>
</template>

<script>
  const wxapp = getApp();
  import UserTabBar from '@/components/UserTabBar.vue'
  import Contact from '@/components/Contact.vue'
  export default {
    data() {
      return {
        images: [
          '../../static/images/swiper01.png',
          '../../static/images/swiper01.png',
          '../../static/images/swiper01.png',
          '../../static/images/swiper01.png'
        ],
        product : [...Array(7)],
        base: [],
        IndexInfo: [],
        jobList: [],
        page: 1
      }
    },

    components: {
      UserTabBar,
      Contact,
    },

    methods: {
      phone(){
        wx.makePhoneCall({
          phoneNumber: this.base.zixundianhua //仅为示例，并非真实的电话号码
        });
      },
      map(){
        wx.openLocation({
          latitude: this.base.latitude,
          longitude: this.base.longitude,
          scale: 18,
          name: this.base.dtsmc,
          address:this.base.dtsdz
        })
      },
      getIndex() {
        wx.showLoading({
          title: '加载中',
        })
        let that = this
        wx.request({
          url: wxapp.globalData.ROOT_URL, //仅为示例，并非真实的接口地址
          data: {
             siteid: '5' ,
             service: 'App.Hong.IndexInfo'
          },
          header: {
              'content-type': 'application/json' // 默认值
          },
          success: function(res) {
            that.IndexInfo = res.data.data.result
            that.images = that.IndexInfo.banner
            console.log(that.IndexInfo)
            wx.hideLoading()
          }
        })
      },
      getList() {
        wx.showLoading({
          title: '加载中',
        })
        let that = this
        wx.request({
          url: wxapp.globalData.ROOT_URL, //仅为示例，并非真实的接口地址
          data: {
             siteid: '5' ,
             service: 'App.Hong.Index',
             page: that.page,
             table: '5_news',
             ftable: '5_share_category',
             id: '1'
             // where: {
             //   tui: 1
             // }
          },
          success: function(res) {
            wx.hideLoading()
            that.isLoading = false
            if(res.data.data.result == 0) {
              wx.showToast({
                title: '没有了',
                icon: 'success',
                duration: 2000
              })
              that.isNext = false
            }else {
              let list = res.data.data.result
              if(that.page >1) {
                let jobList = that.jobList
                for(let i in list) {
                  jobList.push(list[i])
                }
                that.jobList = jobList
              }else {
                that.jobList = list
              }
            }

          }
        })
      }
    },
    onLoad() {
      let that = this
      wx.getStorage({
        key: 'base',
        success: function(res) {
            that.base = res.data
        }
      })
      this.getIndex()
      this.getList()
    }
  }
</script>

<style scoped>
  div{
    box-sizing: border-box;
  }
  swiper, swiper-item {
    width: 750rpx;
    height: 355rpx;
  }

  .swiperimage {
    width: 750rpx;
    height: 355rpx;
  }

  .page-entry .entry-list {
    width: 100%;
    height: 450rpx;
  }

  .page-entry .entry-list:last-child {
   margin-top: -10rpx;
  }

  .page-entry .entry-list .item{
    width: 375rpx;
    float: left;
    margin-top: 10rpx;
    position: relative;
  }
  .page-entry .entry-list .item:first-child {
    /* padding: 0 5rpx 0 10rpx; */
  }
  .page-entry .entry-list .item:last-child {
    /* padding: 0 10rpx 0 5rpx; */
  }
  .page-entry .entry-list .item-img {
    width: 360rpx;
    height: 200rpx;
  }
  .page-entry .entry-name{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 60rpx;
    line-height: 200rpx;
    text-align: center;
    text-shadow: 0 0 4px #fff, 0 0 4px #fff,
                0 0 4px #fff, 0 0 4px #fff,
                0 0 4px #fff, 0 0 4px #fff,
                0 0 4px #fff, 0 0 4px #fff;
  }

  .split-line{
    position: relative;
    height: 8rpx;
    width: 730rpx;
    margin: 25rpx auto;
    background: #0081DA;
  }
  .split-line span{
    color: #0081DA;
    position:absolute;
    left:50%;
    top:-22rpx;
    margin-left:-120rpx;
    padding:0 20rpx;
    font-size:40rpx;
    display:block;
    width:200rpx;
    background:#fff;
    text-align:center;
  }

  .product-component{
    margin-top: 34rpx;
  }
  .product-ad-img{
    display: block;
    width: 750rpx;
    margin:  0 auto;
    height: 200rpx;
  }
  .product-list{
    display: flex;
    flex-wrap: wrap;
  }
  .product-list .product-item{
    flex-basis: 50%;
    padding: 5rpx;
    overflow: hidden;
  }
  .product-list .product-content{
    border: 3rpx solid #0081DA;
    border-radius: 10rpx;
    overflow:hidden;
  }
  .product-list .product-item .product-img{
    width: 363rpx;
    height: 200rpx;
  }
  .product-list .product-item .product-name{
    text-align: center;
    border-top: 3rpx solid #0081DA;
  }
  .space{
    width: 750rpx;
    height: 10rpx;
    background: #F2EDED;
  }
  .info-item{
    padding:20rpx 10rpx;
    line-height:35rpx;
    font-size: 30rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .item-left{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex:0 0 80%;

  }
  .item-left .img{
    width: 40rpx;
    height: 40rpx;
    min-width:40rpx;

  }
  .item-left .content{
    padding-left: 8rpx;
  }
  .item-right{
    color: #2B9CDA;
    width: 140rpx;
  }
</style>
